Vue.component2('select2__', {  
  template: `
<el-dialog  
  :title="data.title"  
  :visible.sync="dialogVisible"  
  width="30%"  
  :before-close="handleClose">  
  <div>  
    <el-select style="width:40%"v-model="selectedOption1" placeholder="请选择">  
      <el-option  
        v-for="item in data.options1"  
        :key="item.value"  
        :label="item.label"  
        :value="item.value">  
      </el-option>  
    </el-select>  
    <div class="el-select"style="width:15%"><div style="display: grid;place-items: center;">=&gt;</div></div>
    <el-select style="width:40%" v-model="selectedOption2" placeholder="请选择">  
      <el-option  
        v-for="item in data.options2"  
        :key="item.value"  
        :label="item.label"  
        :value="item.value">  
      </el-option>  
    </el-select>  
  </div>  
  <span slot="footer" class="dialog-footer">  
    <el-button @click="dialogVisible = false">取 消</el-button>  
    <el-button type="primary" @click="submitForm">确 定</el-button>  
  </span>  
</el-dialog>  
`,  
data(){  

  return {  
      dialogVisible: true,
      selectedOption1: '',  
      selectedOption2: '',  
      textValue: '',  
      data:{
        title:'提示',
          options1: [  
          ],  
          options2: [  
          ]  ,
          callback:null,
      }
      
      
  }    

},
  methods: {  
      handleClose(done) {  
          this.$confirm('确认关闭？')  
            .then(_ => {  
              done();  
            })  
            .catch(_ => {});  
        },  
        check(){
          let fg1=0;let fg2=0;//标志
          let index1=0,index2=0;//index
          for(index1=0;index1<this.data.options1.length;index1++){
            if (this.data.options1[index1].value==this.selectedOption1){fg1=1;break}
          }
          if (fg1==0){return false}
          for(index2=0;index2<this.data.options2.length;index2++){
            if (this.data.options2[index2].value==this.selectedOption2){fg1=1;return {
              index1:index1,index2:index2
            }}
          }
          return false
        },
        submitForm() {  
          let res=this.check();
          if (res){
            if (this.data.callback){this.data.callback(
              {key1:this.selectedOption1,value1:this.data.options1[res.index1].label,
              key2:this.selectedOption2,value2:this.data.options2[res.index2].label,
            })}
            // 在这里可以添加更多逻辑，比如发送数据到服务器  
            this.dialogVisible = false; // 关闭对话框  
          }
          else{
            this.$confirm('参数为空，请重新输入或者取消。')  
            .then(_ => {  
            })  
            .catch(_ => {});  
          }
        }  
  },  
} 
);



window.select2__=function(info={
"title":"1->2",
  "select1":{1:"params1",2:"params2"},"select2":{1:"recv_params1",2:"recv_params2",3:"recv_params3"},
  callback:function(params){console.log("select:",params);
}
}){
      let option1=[];
      let option2=[];
      for (let key in info.select1){
          option1.push({value: key, label: info.select1[key]})
      }
      for (let key in info.select2){
          option2.push({value: key, label: info.select2[key]})
      }
  const DialogConstructor = Vue.extend({  
      template: '<select2__ :deepcopy_data="val"></select2__>',  
      data() {  
          return{
              val:{
                  options1:option1,
                  options2:option2,
                  callback:info.callback,
              }
          }
      },  
      methods: {  
          onConfirm() {  
              // 对话框确认后的逻辑  
              this.$destroy(); // 销毁Vue实例  
              this.$el.remove(); // 从DOM中移除元素  
          }  
      },  
      mounted() {  
          document.body.appendChild(this.$el); // 将对话框挂载到body下  
      }  
  });  

  // 创建并挂载Vue实例  
  new DialogConstructor().$mount();  
}